<!--
    by: yuanbiao 2020年11月19日
    name: 页面框架
    notes:
-->
<template>
<div class="frame-wrapper" :style="frameStyles">
    <div class="frame-head">
        <headbar></headbar>
    </div>
    <div class="frame-body">
        <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
            <keep-alive :include="keepAliveList">
                <router-view></router-view>
            </keep-alive>
        </transition>
    </div>
    <div class="frame-foot">
        <footbar></footbar>
    </div>
    <cmpToolsResident></cmpToolsResident>
</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import headbar from './headbar.vue'
import footbar from './footbar.vue'
import cmpToolsResident from '@/components/cmp-tools-resident.vue'
const {ipcRenderer} = global.require('electron')

export default {
    name: 'index',
    components: {
        headbar,
        footbar,
        cmpToolsResident
    },
    data () {
        return {
            bgImage: this.loadFile('bg-02.jpg')
        }
    },
    computed: {
        ...mapState({
            keepAliveList: 'keepAliveList'
        }),
        ...mapGetters({
            isLogined: 'isLogined'
        }),
        frameStyles () {
            return {backgroundImage: `url(${this.bgImage})`}
        }
    },
    watch: {
        '$route' (n, o) {
            console.log(`路由跳转：${o.name} => ${n.name}`)
            switch (n.name) {
                case 'tools':
                    this.bgImage = this.loadFile('bg-01.jpg')
                    break
                default:
                    this.bgImage = this.loadFile('bg-02.jpg')
                    break
            }
        }
    },
    methods:{
        init () {
            ipcRenderer.on('custom-protocol', (event, data) => {
                console.log(`自定义协议：`, data)
            })
            ipcRenderer.send('get-custom-protocol-params')
            // if (this.isLogined) {
            //     this.$router.push({ name: 'home' })
            // } else {
            //     this.$router.push({ name: 'login' })
            // }
            // 跳转
            if (this.$route.query.redirect) {
                this.$router.push({name: this.$route.query.redirect})
            } else {
                this.$router.push({ name: 'tools' })
            }
        },
        loadFile (filename) {
            return require(`@/assets/images/public/${filename}`)
        }
    },
    created () {
        this.init()
        window.vm = this
    }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.frame-wrapper {
    .fixed-fullscreen;
    z-index: 2;
    border: 1px solid @borderGrey;
    background-color: @bgMain;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 1.5s linear;
    display: flex;
    flex-direction: column;
    .frame-body {
        height: 0;
        flex-grow: 1;
        overflow: auto;
    }
}
</style>
